<template>
  <div style="height: calc(100% - 128px);">
    <!-- title -->
    <h2>部门管理</h2>

    <Divider />

    <div class="button-container margin-bottom-8">
      <Button type="primary" icon="md-refresh"
              @click="initData">刷新</Button>
      <Button v-if="hasPermissionEdit"
              type="primary" icon="md-add"
              @click="openCreateModal">添加</Button>
    </div>

    <Card style="height: 100%;width: 100%;overflow:hidden">
      <div class="department-outer">
        <div class="api-box">
          <a href="https://github.com/lison16/v-org-tree" target="_blank">v-org-tree文档</a>
        </div>
        <div class="revolve-box">
          <Icon :type="expandAll ? 'md-remove' : 'md-add'"
                @click="openOrClose" :size="20"
                :title="expandAll ? '全部收起' : '全部展开'"
                style="margin-right: 10px"/>
          <Icon type="md-refresh" @click="revolve" :size="20"
                :title="horizontal ? '水平展示' : '垂直展示'"/>
        </div>
        <div class="zoom-box">
          <ZoomController v-model="zoom" :min="20" :max="200"></ZoomController>
        </div>
        <div class="view-box">
          <DeptTree v-if="deptTree"
                    ref="deptTree"
                    :data="deptTree"
                    :horizontal="horizontal"
                    :expand-all="expandAll"
                    :zoom-handled="zoomHandled"
                    @edit-department="openUpdateModal"
                    @delete-department="delDepartment"></DeptTree>
        </div>
      </div>
    </Card>

    <Create ref="createModal" @success="initData"></Create>
    <Update ref="updateModal" @success="initData"></Update>
  </div>
</template>

<script>
import DeptTree from './components/deptTree.vue';
import ZoomController from './components/zoomController.vue';
import Create from './components/create.vue';
import Update from './components/update.vue';

import { departmentTree, deleteDepartment } from '../../../apis/system/department';
import SystemUtil from '../../../utils/systemUtil';

import './index.less';

export default {
  name: 'index',
  components: {
    DeptTree,
    ZoomController,
    Create,
    Update
  },
  data() {
    return {
      deptTree: null,
      zoom: 100,
      horizontal: false,
      expandAll: true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
    },
    initData() {
      departmentTree(undefined, (responseData) => {
        const departments = SystemUtil.getDepartments(responseData);
        if (departments && departments.length > 0) {
          this.deptTree = departments[0];
        }
      });
    },
    openOrClose() {
      this.expandAll = !this.expandAll;
    },
    revolve() {
      this.horizontal = !this.horizontal;
    },
    openCreateModal() {
      this.$refs.createModal.openModal();
    },
    openUpdateModal(data) {
      this.$refs.updateModal.openModal(data.value);
    },
    delDepartment(data) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据及其子数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteDepartment(data.value, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initData();
          });
        }
      });
    }
  },
  computed: {
    zoomHandled() {
      return this.zoom / 100;
    },
    hasPermissionEdit() {
      return this.$permission.hasPermissions(['system:resource:edit']);
    }
  }
}
</script>

<style scoped>

</style>
